<template>
  <t-popup placement='bottom' trigger="click" show-arrow>
    <div class="date">
      <t-button>
        <template #icon>
          <CalendarIcon/>
        </template>
        <span v-if="!hasDate">
          <span>日期</span>
          <del>与提醒</del>
        </span>
        <span v-else-if="hasSign">{{ props.start }}</span>
        <span v-else>{{ props.start }} - {{ props.end }}</span>
      </t-button>
    </div>
    <template #content>
      <t-date-range-picker-panel v-model="range"/>
    </template>
  </t-popup>
</template>
<script lang="ts" setup>
import {CalendarIcon} from "tdesign-icons-vue-next";

const props = defineProps({
  start: {
    type: String,
    default: ''
  },
  end: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:start', 'update:end', 'change']);
console.log(props);
const range = ref<Array<string | Date>>([props.start, props.end]);

const hasSign = computed(() => props.start === props.end);
const hasDate = computed(() => props.start && props.end);

watch(() => range.value[0], value => {
  emit('update:start', value);
  emit('change');
});
watch(() => range.value[1], value => {
  emit('update:end', value);
  emit('change');
});

</script>
<style scoped lang="less">
</style>
